<template>
   <view class="uv-page">
      <view>
         <uv-cell-group>
            <uv-cell
               v-for="(item, index) in list"
               :key="index"
               :title="item.title"
               :label="values[index]"
               :isLink="true"
               @click="showCalendar(index)"
            >
               <template v-slot:icon>
                  <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
               </template>
            </uv-cell>
         </uv-cell-group>
         <uv-calendar
            ref="calendar1"
            :defaultDate="currentDate"
            @confirm="confirm"
            @close="close"
            @change="change"
         >
         </uv-calendar>

         <uv-calendar
            ref="calendar2"
            mode="multiple"
            :defaultDate="[currentDate]"
            month-num="5"
            @confirm="confirm"
            @close="close"
            @change="change"
         ></uv-calendar>

         <uv-calendar
            ref="calendar3"
            mode="range"
            @confirm="confirm"
            @close="close"
            @change="change"
         ></uv-calendar>

         <uv-calendar
            ref="calendar4"
            mode="range"
            @confirm="confirm"
            @close="close"
            color="#f56c6c"
            :defaultDate="customThemeDefaultDate"
         ></uv-calendar>

         <!-- #ifdef MP-WEIXIN -->
         <!-- #ifdef VUE3 -->
         <uv-calendar
            ref="calendar5"
            mode="range"
            @confirm="confirm"
            @close="close"
            :defaultDate="customTextDefaultDate"
            startText="住店"
            endText="离店"
            confirmDisabledText="请选择离店日期"
            :formatter="formatter"
         ></uv-calendar>
         <!-- #endif -->
         <!-- #endif -->
         <!-- #ifndef MP-WEIXIN -->
         <uv-calendar
            ref="calendar5"
            mode="range"
            @confirm="confirm"
            @close="close"
            :defaultDate="customTextDefaultDate"
            startText="住店"
            endText="离店"
            confirmDisabledText="请选择离店日期"
            :formatter="formatter"
         ></uv-calendar>
         <!-- #endif -->
         <uv-calendar
            ref="calendar6"
            @confirm="confirm"
            @close="close"
            :maxDate="maxDate"
         ></uv-calendar>
         <uv-calendar ref="calendar7" @confirm="confirm" @close="close" showLunar></uv-calendar>
         <uv-calendar
            ref="calendar8"
            @confirm="confirm"
            @close="close"
            mode="multiple"
            :defaultDate="defaultDateMultiple"
         ></uv-calendar>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const calendar1 = ref();
const calendar2 = ref();
const calendar3 = ref();
const calendar4 = ref();
const calendar5 = ref();
const calendar6 = ref();
const calendar7 = ref();
const calendar8 = ref();

const d = new Date();
const year = d.getFullYear();
const month = d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1;
const date = d.getDate();
const desc = '打6折';
const currentDate = `${year}-${month}-${date}`;
const index = ref(0);
const values = ref(['', '', '', '', '', '', '', '']);
const customThemeDefaultDate = ref([`${year}-${month}-${date}`, `${year}-${month}-${date + 5}`]);
const customTextDefaultDate = ref([`${year}-${month}-${date}`]);
const maxDate = ref(`${year}-${month}-${date + 10}`);
const defaultDateMultiple = ref([
   `${year}-${month}-${date}`,
   `${year}-${month}-${date + 1}`,
   `${year}-${month}-${date + 2}`,
]);

const list = [
   {
      title: '单个日期',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/7.png',
   },
   {
      title: '多个日期',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/8.png',
   },
   {
      title: '日期范围',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/9.png',
   },
   {
      title: '自定义主题颜色',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/15.png',
   },
   {
      title: '自定义文案',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/14.png',
   },
   {
      title: '日期最大范围',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/13.png',
   },
   {
      title: '显示农历',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/5.png',
   },
   {
      title: '默认日期',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/10.png',
   },
];

const showCalendar = (i: number) => {
   index.value = i + 1;
   switch (index.value) {
      case 1:
         calendar1.value.open();
         break;
      case 2:
         calendar2.value.open();
         break;
      case 3:
         calendar3.value.open();
         break;
      case 4:
         calendar4.value.open();
         break;
      case 5:
         calendar5.value.open();
         break;
      case 6:
         calendar6.value.open();
         break;
      case 7:
         calendar7.value.open();
         break;
      case 8:
         calendar8.value.open();
         break;
   }
};

const confirm = (selectedDates: string[]) => {
   const currentIndex = index.value - 1;

   switch (currentIndex) {
      case 0: // 单个日期
         values.value[currentIndex] = selectedDates[0];
         break;
      case 1: // 多个日期
         values.value[currentIndex] = selectedDates.join(';');
         break;
      case 2: // 日期范围
      case 3: // 自定义主题颜色的日期范围
      case 4: // 自定义文案的日期范围
         values.value[currentIndex] =
            selectedDates.length > 1
               ? `${selectedDates[0]}~${selectedDates[selectedDates.length - 1]}`
               : selectedDates[0];
         break;
      case 5: // 日期最大范围
      case 6: // 显示农历
         values.value[currentIndex] = selectedDates[0];
         break;
      case 7: // 默认日期（多个）
         values.value[currentIndex] = selectedDates.join(';');
         break;
   }
};

const close = () => {
   console.log('关闭');
};
const formatter = (day: any) => {
   const d = new Date();
   const month = d.getMonth() + 1;

   const date = d.getDate();
   if (day.month == month && day.day == date + 3) {
      day.bottomInfo = '有优惠';
      day.dot = true;
   }
   if (day.month == month && day.day == date + 2) {
      day.topInfo = '顶部文案';
   }
   return day;
};
const change = (e: any) => {
   console.log('点击日期触发：', e);
};
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 0;
}
</style>
